import { Component } from 'react';
import { View, Image, Switch } from '@tarojs/components'
import Iconfont from '@/components/Iconfont'
import classnames from 'classnames'
import './index.scss'

interface Props{
    name: string
    color?: string
    icon?: string
    iconSize?: number | string
    context?: string
    contextColor?: string
    contextIcon?: string
    contextIconSize?: number | string
    image?: string
    contextIconColor?: string
    border?: boolean
    checked?: boolean
    change?: any
    handle?: any
}
interface State{}

export default class Index extends Component<any, Props> {

    constructor (props) {
        super(props)
        this.state = {}
    }

    state: State

    UNSAFE_componentWillMount() { }
    componentDidMount() { }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
    componentWillUnmount() { }

    componentDidShow() { }
    componentDidHide() { }
    componentDidCatchError() { }
    componentDidNotFound() { }
    changeSwitch(e) {
        const { change } = this.props
        change && change(e)
    }
    handleEvent(e?) {
        const { handle } = this.props
        handle && handle(e)
    }
    flexRightCont() {
        const { context, contextColor, contextIcon, contextIconSize, contextIconColor, checked } = this.props
        const showSwitch = typeof checked === 'boolean'
        return context && (
            <View className='flex-right-cont'>
                <View className='context' style={contextColor ? `color: ${contextColor}` : ''}>{context}</View>
                { contextIcon &&  <View className='icon'><Iconfont color={contextIconColor ? contextIconColor : '#CCCCCC'} size={contextIconSize ? contextIconSize : '30'} name={contextIcon} /></View>}
                { showSwitch && <Switch className='switch' color='#12B3FF' checked={checked} onChange={this.changeSwitch.bind(this)} />}
            </View>
        )
    }
    render() {
        const { icon, name, iconSize, color, image, border, baseline } = this.props
        return (
            <View onClick={() => this.handleEvent()} className={classnames('state-list', border && 'border', baseline && 'baseline')}>
                <View className='flex-left-cont'>
                    { image && <Image className='pic' src={image} />}
                    { icon &&  <View className='icon'><Iconfont size={iconSize ? iconSize : '44'} name={icon} /></View>}
                    <View className='name' style={color ? `color: ${color}` : ''}>{name}</View>
                </View>
                {this.flexRightCont()}
            </View>
        )
    }
}
